<template>
  <div class="managerMana-container common-container">
    <div class="common-top">
      <span class="left title">个人中心</span>
    </div>
    <div class="common-bot">
      <el-card shadow="hover" style="margin-top: 5px">
        <div slot="header" class="clearfix">
          <span>账号资料</span>
        </div>
        <el-form label-position="left" label-width="150px" size="mini">
          <el-form-item label="ID">
            {{ my.id }}
          </el-form-item>
          <el-form-item label="手机号码">
            {{ my.mobile }}
          </el-form-item>
          <el-form-item label="过期时间">
            <b><span v-if="my.expired" style="color: red">(已过期)</span></b>
            <span>{{ my.expiredTime | parseTime }}</span><br>
            <el-link type="primary" @click.stop="$router.push({path: `/renewal`})">账号续期</el-link>
          </el-form-item>
          <el-form-item label="密码">
            ******
            <el-link type="primary" icon="el-icon-edit" @click.stop="dialogVisible=true">更改密码</el-link>
          </el-form-item>
          <el-form-item label="邮箱">
            {{ my.email || '--' }}
            <!--            <el-link type="primary" icon="el-icon-edit">更改邮箱</el-link>-->
          </el-form-item>
          <el-form-item label="昵称">
            {{ my.name }}
          </el-form-item>
          <el-form-item label="邀请码">
            {{ my.clientKey }}<br>
            <span>每成功邀请一个（使用三天以上才有效的）新用户可免费获得<b> {{ setting.newUserInviteTryDays }} </b>天的体验时长。</span>
          </el-form-item>
        </el-form>
      </el-card>
      <div style="padding: 10px">近期登录历史</div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="ip" label="IP" width="150"></el-table-column>
        <el-table-column prop="region" label="位置"></el-table-column>
        <el-table-column prop="createTime" label="时间" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | parseTime }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-if="showPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="nowPage"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="totalElement"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      title="修改密码"
      :visible.sync="dialogVisible"
      width="30%" top="35vh">
      <el-form :model="updatePwdForm" label-position="right" label-width="100px" size="mini">
        <el-form-item label="旧密码">
          <el-input v-model="updatePwdForm.oldPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="updatePwdForm.password1" type="password"></el-input>
        </el-form-item>
        <el-form-item label="重复新密码">
          <el-input v-model="updatePwdForm.password2" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click.stop="updatePwdFormSubmit">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Api from "@/api";
import {encryptStr} from "@/utils/aesUtils";

export default {
  name: "my",
  data() {
    return {
      showPage: false,
      tableData: [],
      limit: 10,
      nowPage: 1,
      totalElement: 0,
      my: {},
      setting: {},
      dialogVisible: false,
      updatePwdForm: {
        oldPassword: '',
        password1: '',
        password2: ''
      }
    };
  },
  watch: {
    nowPage(val) {
      this.getData();
      this.setStateData(val);
    },
    limit(val) {
      this.getData();
    },
  },
  methods: {
    setStateData(nowPage) {
      let stateData = {
        nowPage,
      };
      this.$router.replace({
        path: this.$route.path,
        query: {
          stateData: this.$base64.encode(JSON.stringify(stateData)),
        },
      });
    },
    handleSizeChange(val) {
      this.limit = val;
    },
    handleCurrentChange(val) {
      this.nowPage = val;
    },
    getData() {
      Api.managerLoginHistory
        .list({
          limit: this.limit,
          page: this.nowPage - 1
        }).then((res) => {
        this.tableData = res.data;
        this.totalElement = res.total;
        this.showPage = true;
      });
      Api.manager.my().then((res) => {
        this.my = res.data;
        this.setting = res.extra.setting;
      })
    },
    updatePwdFormSubmit() {
      Api.manager.updatePwdByOld({
        oldPassword: encryptStr(this.updatePwdForm.oldPassword),
        password1: encryptStr(this.updatePwdForm.password1),
        password2: encryptStr(this.updatePwdForm.password2),
      }).then((res) => {
        this.dialogVisible = false
      })
    }
  },
  mounted() {
    this.getData();
  },
}
</script>

<style lang="less" scoped>

</style>
